<template>
  <el-form ref="formData" :model="formData" label-width="55px">
    <el-form-item label="需求名称" prop="visionDemandName" label-width="80px">
      <el-input
        v-model="formData.visionDemandName"
        placeholder="请输入需求名称"
        size="small"
      ></el-input>
    </el-form-item>
    <el-form-item label="BU" prop="buIds">
      <BU
        multiple
        :form="formData"
        formId="buIds"
        size="small"
        @selectAll="Bu"
        @selectDel="Bu"
      ></BU>
    </el-form-item>
    <el-form-item label="系列" prop="categoryIds">
      <category
        multiple
        ref="category"
        :form="formData"
        formId="categoryIds"
        formBU="buIds"
        @selectAll="Category"
        @selectDel="Category"
        size="small"
      ></category>
    </el-form-item>
    <el-form-item label="型号" prop="productIds">
      <product
        ref="product"
        formId="productIds"
        formBU="buIds"
        formCategory="categoryIds"
        :form="formData"
        :multiple="true"
        @selectAll="Product"
        @selectDel="Product"
        size="small"
      ></product>
    </el-form-item>
    <el-form-item label="状态" prop="visionDemandStatusIds">
      <el-select
        v-model="formData.visionDemandStatusIds"
        placeholder="请选择状态"
        multiple
        collapse-tags
        filterable
        clearable
        size="small"
      >
        <allAddDelSelect
          :selectForm="formData"
          :selectArray="VisionDemandStatusList"
          selectFormId="visionDemandStatusIds"
          selectArrayId="visionDemandStatusId"
        ></allAddDelSelect>
        <el-option
          v-for="item in VisionDemandStatusList"
          :key="item.visionDemandStatusId"
          :label="item.statusName"
          :value="item.visionDemandStatusId"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="设计师" prop="designDemandUserIds" label-width="65px">
      <el-select
        v-model="formData.designDemandUserIds"
        placeholder="请选择设计师"
        multiple
        collapse-tags
        filterable
        clearable
        size="small"
      >
        <allAddDelSelect
          :selectForm="formData"
          :selectArray="DesignerList"
          selectFormId="designDemandUserIds"
          selectArrayId="userId"
        ></allAddDelSelect>
        <el-option
          v-for="item in DesignerList"
          :key="item.userId"
          :label="item.chineseName"
          :value="item.userId"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="需求类型" prop="visionDemandTypes" label-width="80px">
      <el-select
        v-model="formData.visionDemandTypes"
        placeholder="请选择需求类型"
        multiple
        collapse-tags
        filterable
        clearable
        size="small"
      >
        <allAddDelSelect
          :selectForm="formData"
          :selectArray="VisionDemandTypeList"
          selectFormId="visionDemandTypes"
          selectArrayId="key"
        ></allAddDelSelect>
        <el-option
          v-for="item in VisionDemandTypeList"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="date" :label="$t('m.label.date')">
      <el-date-picker
        v-model="formData.date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd"
        size="small"
        @change="daterange"
      ></el-date-picker>
    </el-form-item>

    <el-form-item label="创建人" prop="createUserIds" label-width="65px">
      <el-select
        v-model="formData.createUserIds"
        placeholder="请选择创建人"
        multiple
        collapse-tags
        filterable
        clearable
        size="small"
      >
        <allAddDelSelect
          :selectForm="formData"
          :selectArray="createUserList"
          selectFormId="createUserIds"
          selectArrayId="userId"
        ></allAddDelSelect>
        <el-option
          v-for="item in createUserList"
          :key="item.userId"
          :label="item.userName"
          :value="item.userId"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label-width="10px">
      <el-button
        type="primary"
        @click="submitForm('formData')"
        icon="el-icon-search"
        size="small"
        >{{ $t("m.button.search") }}</el-button
      >
      <el-button
        @click="resetForm('formData')"
        icon="el-icon-circle-close"
        size="small"
        >{{ $t("m.button.reset") }}</el-button
      >
      <el-button
        type="success"
        @click="$router.push({ path: '/OACenter/visualDesign/vision' })"
        icon="el-icon-circle-close"
        size="small"
        >新增需求</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script>
const ERR_OK = 200;
import BU from "components/searchfor/bu";
import category from "components/searchfor/category";
import product from "components/searchfor/product";
import datePicker from "components/searchfor/date-picker";
export default {
  data() {
    return {
      formData: {
        buIds: [],
        categoryIds: [],
        createUserIds: [],
        productIds: "",
        endTime: "",
        startTime: "",
        visionDemandTypes: [],
        visionDemandName: "",
        visionDemandStatusIds:[],
        designDemandUserIds:[],
        userId: this.$store.getters.userId,
        pageNumber: 1,
        pageSize: 20,
      },
      productList: [],
      VisionDemandStatusList: [],
      VisionDemandTypeList: [],
      DesignerList: [],
      createUserList: [],
    };
  },
  created() {
    const formData = this.$store.getters.design;
    if (formData) {
      Object.assign(this.formData,formData)
    }
    this.getVisionDemandStatusList();
    this.getVisionDemandTypeList();
    this.submitForm();
    this.getDesignerList();
    this.getCreateUserList();
  },
  methods: {
    Bu() {
      this.$refs.category.getCategory();
      this.$refs.product.getProduct();
    },
    Category() {
      this.$refs.category.getCategory(true);
      this.$refs.product.getProduct();
    },
    Product() {
      this.$refs.product.getProduct(true);
    },
    getVisionDemandStatusList() {
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand +
            "/visionDemandBasicInfo/getVisionDemandStatusList"
        )
        .then((res) => {
          if (res.data.code === ERR_OK) {
            this.VisionDemandStatusList = res.data.data;
          }
        });
    },
    //获取视觉需求类型列表
    getVisionDemandTypeList() {
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand +
            "/visionDemandBasicInfo/getVisionDemandTypeList"
        )
        .then((res) => {
          if (res.data.code === ERR_OK) {
            this.VisionDemandTypeList = res.data.data;
          }
        });
    },
    getDesignerList() {
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand + "/visionDemandBasicInfo/getDesignerList"
        )
        .then((res) => {
          if (res.data.code === ERR_OK) {
            this.DesignerList = res.data.data;
          }
        });
    },
    getCreateUserList() {
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand +
            "/visionDemandBasicInfo/getCreateUserList"
        )
        .then((res) => {
          if (res.data.code === ERR_OK) {
            this.createUserList = res.data.data;
          }
        });
    },

    daterange(date) {
      if (date) {
        this.formData.startTime = date[0];
        this.formData.endTime = date[1];
      } else {
        this.formData.startTime = "";
        this.formData.endTime = "";
      }
    },
    submitForm(formData) {
      this.$store.dispatch("DesignSetting", this.formData);
      this.$emit("submitForm", this.$store.state.formData.design);
    },
    resetForm(formName) {
      this.formData = {
        buIds: [],
        categoryIds: [],
        createUserIds: [],
        designDemandUserIds: [],
        endTime: "",
        pageNumber: 1,
        pageSize: 20,
        productIds: [],
        startTime: "",
        userId: this.$store.getters.userId,
        visionDemandName: "",
        visionDemandStatusIds: [],
        visionDemandTypes: []
      },
      this.Bu();
      this.submitForm();
    },
  },
  components: {
    BU,
    category,
    datePicker,
    product,
    allAddDelSelect: (resolve) =>
      require(["components/searchfor/allAddDelSelect.vue"], resolve),
  },
};
</script>
<style lang="stylus" scoped>
.el-form {
  margin-top: 15px;
}

.el-form-item {
  display: inline-block;
  margin-bottom: 10px;

  .el-input {
    width: 100%;
  }

  .el-date-editor {
    width: 220px;
  }
}
</style>
